import React, { Component } from 'react'

/*
  react 中子组件给父组件传值，其实本质上还是父组件给子组件传值，只是说我们传递的是一个函数
  子组件只需要调用该函数即可，调用的时候可以将参数携带过去

  1. 父组件先定义接收的函数
  2. 通过属性将该函数传递到子组件
  3. 子组件在特定的时候调用该函数即可

*/


const Header = (props)=>{
  console.log(props);
  // 触发父组件传递过来的函数
  props.fn({
    name: '张一',
    msg: '人去哪里了',
    age: 100
  })
  return (
    <>
      <div> 欢迎来到 {props.name} 班级 </div>
    </>
  )
}


class Content extends Component {
  render(){
    this.props.myfn({
      name: '张二',
      age: 88
    })
    return (<>
      <div> {this.props.contentName} 学习 react 实际上就是在学 JavaScript </div>
    </>)
  }
}

export default class App extends Component {

  // 父组件中先定义一个接收的函数，用来接收子组件传递值用的方法
  getData = (val)=>{
    console.log('父组件接收：', val);
  }

  render() {
    return (
      <div>
        <Header fn={this.getData} name='H5-2218' num={10}></Header>
        <Content myfn={this.getData} contentName='张一' />
      </div>
    )
  }
}
